import {defineConfig, presetAttributify, presetUno, transformerDirectives} from 'unocss'
import presetRemToPx from "@unocss/preset-rem-to-px";

const DIRECTION_MAPPIINGS = {t: 'top', r: 'right', b: 'bottom', l: 'left'}

export default defineConfig({
    rules: [
        // border 的 写法进行格式化 bd-npx_dashed/solid_color
        [
            /^b(t|r|b|l|d)-(.*)/,
            ([, d, c]) => {
                const direction = DIRECTION_MAPPIINGS[d] || ''
                const p = direction ? `border-${direction}` : 'border'
                const attrs = c.split('_')
                if (
                    // 属性中不包含 border-style 则默认 solid
                    !attrs.some((item) =>
                        /^(none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset)$/.test(item),
                    )
                ) {
                    attrs.push('solid')
                }
                // 属性中不包含 border-width 则默认 1px
                if (!attrs.some((item) => /^\d/.test(item))) {
                    attrs.push('1px')
                }
                return {
                    [p]: attrs.join(' '),
                }
            },
        ],
        // 自定义属性格式 [ 'name': {styleName: styleValue }  ]
        [
            'bg-line', {background: 'linear-gradient(#414652,#111827)'}
        ],
        [
            'bg-sun', {background: 'linear-gradient(#a3c5fe, #c2e9fb, #f9fafb)'}
            // 'bg-sun', {background: 'linear-gradient(135deg,#839d94,#aec2b7,#f0f5f1, #f9fafb)'}
        ],
        [
            'bg-bottom-dark', {background: 'linear-gradient(#111827,#080b12)'}
        ],
        [
            'bg-bottom', {background: 'linear-gradient(#f9fafb, #ddd)'}
        ],
        // fixed 水平居中
        [
            'middle', {left: '50%', transform: 'translate(-50%, 0)'}
        ]
    ],
    //预设规则 有前两个预设可以满足95%以上的需求
    presets: [
        //默认预设，包括Tailwind CSS、Windi CSS、Bootstrap、Tachyons，可以使用以上任意规则
        presetUno(),
        //属性化模式 文档参考：https://unocss.nodejs.cn/presets/attributify
        presetAttributify(),

        // 启用rem转px
        presetRemToPx({
            //默认情况下（1单位 = 0.25rem）html默认字体是16，改为4，每单位就是1px
            baseFontSize: 4
        }),
    ],
    //配置后可以使用 @apply、@screen等指令 参考地址：https://unocss.nodejs.cn/transformers/directives
    transformers: [transformerDirectives()],
    //以下可以按个人需求添加
    shortcuts: {
        "f-c-c": "flex justify-center items-center",
    },
    theme: {
        colors: {
            primary: 'var(--primary-color)',
            dark_bg: 'var(--dark-bg)',
        },
    },
})
